<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <title>授权</title>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="padding-15 card">
                <!--按钮栏-->
                <div class="form-group button-bar">
                    <button isShow="" type="button" class="btn btn-primary" onclick="setAuth()">
                        <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;资源授权
                    </button>
                    <button isShow="" type="button" class="btn btn-info" onclick="setButtonAuth()">
                        <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;按钮授权
                    </button>
                    <button type="button" class="btn btn-warning" onclick="window.location.reload()">
                        <i class="fa fa-refresh" aria-hidden="true"></i>&nbsp;刷新
                    </button>
                </div>
                <!--/按钮栏-->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-md-3 col-lg-3">
            <div class="padding-15 card core-list">
                <div class="tree-title">角色列表</div>
                <ul class="ztree" id="roleTree"></ul>
            </div>
        </div>
        <div class="col-sm-4 col-md-3 col-lg-3">
            <div class="padding-15 card core-list">
                <div class="tree-title">资源列表</div>
                <ul class="ztree" id="navTree"></ul>
            </div>
        </div>
        <div class="col-sm-4 col-md-3 col-lg-3">
            <div class="padding-15 card core-list">
                <div class="tree-title">按钮列表</div>
                <ul class="ztree" id="buttonTree"></ul>
            </div>
        </div>
        <div class="col-sm-4 col-md-3 col-lg-3">
            <div class="padding-15 card core-list">
                <div class="tree-title">使用说明</div>
                <p>1.在[角色列表]一栏点击选中待授权角色，选中后会在[资源列表]和[按钮列表]中显示对应的权限信息；</p>
                <p>2.在[资源列表]一栏勾选该角色对应的资源权限(可选操作)，点击【资源授权】进行授权操作，若没有勾选任何资源，则会清空该角色的资源权限；</p>
                <p>3.在[按钮列表]一栏勾选该角色对应的按钮权限(可选操作)，点击【按钮授权】进行授权操作，若没有勾选任何按钮，则会清空该角色的按钮权限；</p>
            </div>
        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<style>
    html,body{
        height: 100%;
    }
    .tree-title{
        line-height: 25px;
        border-left: #4E97D9 solid 5px;
        text-indent: 5px;
        font-weight: 700;
    }
</style>
<script type="text/javascript">
    //高度适配
    function heightAdapt(){
        var h = $('body').height() - 105;
        if(h > 300){//避免高度过于小
            //$(".table-bar").css('height', h+'px').css('overflow', 'auto');
            $(".core-list").css('height', h+'px').css('overflow', 'auto');
        }else{//默认高度为auto
            //$(".table-bar").css('height', 'auto').css('overflow', 'auto');
            $(".core-list").css('height', 'auto').css('overflow', 'auto');
        }
    }
    window.onresize = function(){
        heightAdapt();
    };
    heightAdapt();

    $(function(){
        //创建左侧角色树
        createRoleTree("roleTree",function(event,treeId,treeNode){
            if(treeNode.nodeType == "ROLE"){
                roleClick(treeNode.id);
            }
        });
    });
    var roleId = "";
    function roleClick(id){
        if(jo.isValid(id)){roleId = id;}else{return;}
        loadNavTree(id);//加载资源树
        loadButtonTree(id);//加载按钮树
    }
    //加载资源树,参数为角色id
    function loadNavTree(id){
        var sUrl = "{URL_UMS}ums/roleNavigate/getNavigateListAboutGrantAuth";
        var oDate = {"roleId":id};
        jo.postAjax(sUrl,oDate,function(json){
            if(json && json.code==0){
                for(var i=0;i<json.data.length;i++){
                    json.data[i].icon2 = json.data[i].icon;
                    json.data[i].icon = null;//ztree的icon属性与资源icon字段冲突
                }
                var param = {
                    treeId:"navTree",
                    zNodes:json.data,
                    item_id:"id",
                    item_pid:"parentId",
                    item_show:"name",
                    check: {//需引入cxcheck扩展包
                        enable: true,    //勾选框开关
                        chkStyle: "checkbox",    //默认checkbox(与chkboxType属性关联),也可以写radio(与radioType属性关联)
                        chkboxType: {"Y":"ps","N":"s"},    //Y和N固定不变,Y表示勾选,N表示取消勾选;Y和N的值为p或s或ps,p表示会影响父节点,s表示会影响子节点
                        radioType: "all"    //取值为"all"和"level",all表示在所有节点中单选,level表示在同一层级内单选
                    }
                };
                jo.drawZTree(param);
            }
        }, true);
    }
    //加载按钮树
    function loadButtonTree(id){
        var sUrl = "{URL_UMS}ums/roleButton/getButtonListAboutGrantAuth";
        var oDate = {"roleId":id};
        jo.postAjax(sUrl,oDate,function(json){
            if(json && json.code==0){
                var obj = {};
                for(var i=0;i<json.data.length;i++){
                    var item = json.data[i];
                    item.icon2 = item.icon;
                    item.icon = '';
                    if(!obj[item.category]){//不存在这个分组
                        obj[item.category] = [];
                    }
                    obj[item.category].push(item);
                }
                var arr = [];
                for(var k in obj){
                    arr.push({id:k, name:k, category:'ROOT', children:obj[k]});
                }
                var param = {
                    treeId : 'buttonTree'
                    ,zNodes : arr
                    ,item_id : "id"
                    ,item_pid : "category"
                    ,item_show : "name"
                    ,check: {//需引入cxcheck扩展包
                        enable: true,    //勾选框开关
                        chkStyle: "checkbox",    //默认checkbox(与chkboxType属性关联),也可以写radio(与radioType属性关联)
                        chkboxType: {"Y":"ps","N":"s"},    //Y和N固定不变,Y表示勾选,N表示取消勾选;Y和N的值为p或s或ps,p表示会影响父节点,s表示会影响子节点
                        radioType: "all"    //取值为"all"和"level",all表示在所有节点中单选,level表示在同一层级内单选
                    }
                };
                jo.drawZTree(param);
            }
        }, true);
    }
    //资源授权
    function setAuth(){
        if(jo.isValid(roleId)){
            var ids = jo.getZTreeCheckedNodesIds("navTree", "id");
            if(!ids){
                jo.confirm('您当前未勾选任何资源(将导致清空该角色的资源权限)，确定继续吗?', function(){
                    setAuthInvoke(roleId, ids);
                });
            }else{
                setAuthInvoke(roleId, ids);
            }
        }
    }
    /**
     * 关联角色资源
     * @param roleId
     * @param ids
     */
    function setAuthInvoke(roleId, ids){
        jo.postAjax("{URL_UMS}ums/roleNavigate/relevanceNavigates2Role",{"roleId":roleId,"navigateIds":ids},function(json){
            if(json && json.code==0){
                jo.showMsg("授权成功!");
            }else if(json && json.code==-1){
                jo.showMsg(jo.getDefVal(json.info,"授权失败!"));
            }else{
                jo.showMsg("授权失败!");
            }
        });
    }
    //按钮授权
    function setButtonAuth(){
        if(jo.isValid(roleId)){
            var checkedNodes = jo.getZTreeCheckedNodes('buttonTree');
            var ids = '';//勾选的按钮id
            for(var i=0;i<checkedNodes.length;i++){
                var node = checkedNodes[i];
                if(node.nodeType == 'BUTTON'){
                    ids += ',' + node.id;
                }
            }
            if(ids){
                ids = ids.substring(1);
            }
            if(!ids){
                jo.confirm('您当前未勾选任何按钮(将导致清空该角色的按钮权限)，确定继续吗?', function(){
                    setButtonAuthInvoke(roleId, ids);
                });
            }else{
                setButtonAuthInvoke(roleId, ids);
            }
        }
    }
    //关联角色按钮
    function setButtonAuthInvoke(roleId, ids){
        jo.postAjax("{URL_UMS}ums/roleButton/relevanceButtons2Role",{"roleId":roleId,"buttonIds":ids},function(json){
            if(json && json.code==0){
                jo.showMsg("授权成功!");
            }else if(json && json.code==-1){
                jo.showMsg(jo.getDefVal(json.info,"授权失败!"));
            }else{
                jo.showMsg("授权失败!");
            }
        });
    }
</script>
</body>
</html>
